<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

</head>

<body>
    <div id="app">
        <h2> {{title}} </h2>
        <p>
            {{msg}}
        </p>
        <p>
            <input type="text" v-model.lazy.trim.number="msg">
        </p>
        <p>
            <label for="agree">
                <input type="checkbox" id="agree" v-model="agree">
                请先同意我们的条款在去注册{{agree}}
            </label>
        </p>
        <div>
            <p>我们的爱好</p>
            <label for="sleep">
                <input type="checkbox" value="Sleep" v-model="checkedNames" id="sleep">睡觉
            </label>
            <label for="sing">
                <input type="checkbox" value="Sing" v-model="checkedNames" id="sing">唱歌
            </label>
            <label for="game">
                <input type="checkbox" value="Game" v-model="checkedNames" id="game">游戏
            </label>
            <p>你的爱好: {{checkedNames}}</p>
        </div>

        <div id="example-4">
            <input type="radio" in="one" value="1" v-model="picked">
            <label for="one">男性</label>
            <input type="radio" in="two" value="2" v-model="picked">
            <label for="two">女性</label>
            <span>Picked: {{ picked }}</span>
        </div>

        <div>
            <p>确定你要去上班的城市：</p>
            <select name="" id="" v-model="select">
                <option value="">请选择</option>
                <option v-for="(l,index) in cities" :value="l.code" :key="index">{{l.city}}</option>
            </select>
            <p>
                我的选择:{{select}}
            </p>
        </div>

        <div>
            <input type="checkbox" v-model="toggle" :true-value="yes" :false-value="no">
            <span> {{toggle}}</span>
        </div>
        <div>
            <input type="radio" v-model="pick" :value="a"> 猫
            <input type="radio" name="" id="" v-model="pick" :value="b">狗
            <input type="radio" name="" id="" v-model="pick" :value="c">仓鼠
            <p> 你喜欢的宠物 : {{pick}}</p>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: "v-model 数据双向绑定",
            msg: "wh2110-daydayup",
            agree: true,
            checkedNames: [],
            picked: '1',
            select: "",
            cities: [
                { city: '武汉', code: "WH" },
                { city: '北京', code: "BJ" },
                { city: '上海', code: "SH" },
                { city: '杭州', code: "HZ" },
                { city: '深圳', code: "SZ" },
                { city: '广州', code: "GZ" }
            ],
            toggle: "yes",
            yes: "晚上我要认真的看电影....",
            no: "不要,我要通宵上分,我要是上砖石",
            pick: "cat",
            a: "cat",
            b: 'dog',
            c: 'cang mouse'
        },
        methods: {

        },
        mounted() {
            document.getElementsByTagName("title")[0].innerHTML = this.title;

        }

    }).$mount("#app")

    const user = {
        username: "zhansan",
        age: 18
    }
    // Object.defineProperties  
    Object.defineProperty(user, "username", {
        // 取值 读username 就会触发
        get() {
            console.log("你读取了 user - username ")
        },
        set(v) {
            // 你修改了 username 的值 
            console.log("new username --- " + v)
        }
    })

</script>
<!-- 
    v-model  用于绑定 input 和textarea 的value框

    语法糖

    他负责监听天赋的输入事件以更新数据，并对一些极端场景进行一些特殊处理

    v-model 实现数据双向绑定
    v-iew  视图层   修改视图（input 事件） v-model 会自动去更新对应的 数据（model）
    model 数据层    修改数据 通过js修改数据 v-model 会自动的去更新 数据对应的视图 （view）

    Vue 不是一个真正的MVVM模式的框架 ，只是借鉴了MNNM 部分精华和优点

    设计模式
    MVC     angularJS
    M   model   数据层
    V   view    视图层
    C   Controller  控制器层

    MVVM
    M   model   数据层
    V   view    视图层
    VM  viewmodel   数据视图对象

    MVP
    M   model   数据层
    V   view    视图层
    P   presenter   逻辑层  （js逻辑处理代码+方法）

    v-model 的底层原理  语法糖
    Object.keys
    Object.value
    Object.freezn
    Object.assign
    Object.defineProperty()
    Object.defineProperty()  进行数据劫持
    (监听数据改变   从而触发修改视图的逻辑函数) （监听输入框输入事件    从而修改对应的数据）

    它会根据控件类型自动选择正确的方法来更新
    v-model 本质上不过是语法糖（包含大量逻辑代码块集合）
    负责监听用户的输入事件以更新数据

    text 和 textarea 元素使用 value属性和input事件
    checkbox 和radio 使用checked属性和change 事件
    select 字段将 value 作为 prop 并将 change 作为事件  $("#select").prop()

    v-model 也有修饰符
    lazy    input 变为 change延迟触发
    trim    去掉首尾空格
    number  用户的输入值转为数据类型
    
 -->

</html>